<template>
  <div class="layout-col">
    <div class="layout-col bss">
      <div class="ww100 flex-bc plr12 ptb8 bs4">
        <div class="flex-sc">
          <span class="f15 fw">分类管理</span>
        </div>
        <div class="flex-ec flex1 h30">
          <div class="rad4 ptb6 plr10 flex-cc cursor bgi3 white ml10" 
            v-if="state.content.find(v=>{return typeof(v.key) == 'object'}) && state.content.find(v=>{return typeof(v.key) == 'object'})['key'].hasOwnProperty('add')" 
            @click.stop="handleClick('add', state.addItem)">
            <i-ep-plus class="f12 fw" /><span class="f14 ml5">{{state.content.find(v=>{return typeof(v.key) == 'object'})['key'].add}}</span>
          </div>
        </div>
      </div>
      <div class="row bgi22">
        <div :style="{textAlign: v.align, paddingRight: v.name=='操作'?'10px': 'inherit'}" v-for="(v, i) in state.content" :key="i" v-show="v.show" :class="v.width">{{v.name}}</div>
      </div>
      <div class="flex1 overlay ww100 flex-col-ss">
        <el-tree 
        class="ww100" 
        ref="treeRef" 
        :data="state.tree"
        :node-key="state.key" 
        :current-node-key="defaultId"
        :props="defaultProps"
        highlight-current    
        accordion
        @node-click="handleNodeClick"
        empty-text="暂无数据">
          <template #default="{ node, data }">
            <span class="row">
              <div v-show="v.show" :class="v.width" :style="{textAlign: v.align}" v-for="(v, i) in state.content" :key="i">
                <span v-if="typeof(v.key) == 'object'" class="i21 cursor mlr5" v-for="(vv, kk, ii) in v.key" :key="ii" :class="kk=='add'?'none':''" @click.stop="handleClick(kk, data)">{{vv}}</span>
                <span v-else-if="v.key=='*'">{{index+1}}</span>
                <span v-else-if="v.type == 'icon5'" class="flex-sc">
                  <img v-if="data.upid == 0" class="mr5" src="@/assets/images/ic8.png" />
                  {{data[v.key]}}
                </span>
                <span v-else>{{isNull(data[v.key]) && v.key!=''? '/' : data[v.key]}}</span>
              </div>
            </span>
          </template>
        </el-tree>
      </div>
      <Add @init="init" :state="state" ref="exposeRef" />
    </div>
  </div>
</template>

<script lang="ts" setup>
  import Add from '@/components/Add'
	const { proxy }:any = getCurrentInstance()
  const publicStore = proxy.publicStore()
  const configStore = proxy.configStore()
  const state = reactive({
	  ...publicStore.$state,
    key: 'id',
    parent: 'upid',
    query: {"o": "o_sensor_template_class"},
    content: [
      { width: 'flex1', show: true, align: 'start', key: 'name', name: '名称', type: 'icon5' }, 
      { width: 'w50x8', show: true, align: 'start', key: 'description', name: '描述' }, 
      { width: 'w50x5', show: true, align: 'start', key: 'orderno', name: '排序' }, 
      { width: 'w50x5', show: true, align: 'right', key: {add: '新增顶级', child:'新增子级', edit:'编辑', del: '删除'},  name: '操作' },
    ],
    editField: {},
    editFrom: [
      { required: true,  editshow: true,  name: '上级', key: 'upid', type: ['tree', [], 'id', 'upid', '顶级'] },
      { required: true,  editshow: true,  name: '名称', key: 'name', type: ['input'] },
      { required: false, editshow: true,  name: '描述', key: 'description', type: ['input'] },
      { required: false, editshow: true,  name: '排序', key: 'orderno', type: ['input'] },
    ],
    addItem: {},
  })
  let exposeRef = $ref()
  let treeRef = $ref()
  let defaultProps = {
    children: 'children',
    label: 'name',
  }
  let defaultId = $ref()

  onMounted(async() => {
    init()
  })

  const setInit = () => {
    state.editFrom.forEach(v => {
      if(v.key == 'upid') v.type[1] = publicStore._public.list
    })
    state.addItem = {upid: '0'}
  }

  const init = async(key) => {
    state.params = {queryApi: state.query}
    let res = await publicStore.post(state.params)
    state.empty = proxy.isNull(res)? true : false
    state.list = proxy.isNull(res)? [] : res.sort((a, b) => b.orderno - a.orderno)
    publicStore._public.list = state.list
    setInit()
    setTree(key)
  }

  const setTree = async(key) => {
    state.tree = proxy.treeData(state.list, state.key, state.parent, 'children')
    let node1 = proxy.findNode(state.tree, (node) => { return !node.children })
    let node2 = proxy.findNode(state.tree, (node) => { return node[state.key] == key })
    let node = proxy.isNull(node2)? node1 : node2
    await nextTick()
    handleNodeClick(node)
  }

  const handleNodeClick = async(val) => {
    defaultId = val[state.key]
    treeRef.setCurrentKey(defaultId, true)
    publicStore.active = val
  }

  const handleClick = (remark, val) => {
    if(remark == 'add' || remark == 'edit'){
      exposeRef.onVisable(val)
    }
    if(remark == 'del'){
      exposeRef.del(val, state.query, state.key, state.tree)
    }
    if(remark == 'child'){
      let newval = proxy.varObj(state.parent, val[state.key])
      if(val.hasOwnProperty('stationNum')){
        newval.stationNum = val.stationNum
      }
      exposeRef.onVisable(newval)
    }
  }
</script>
  
<style scoped lang="scss">

</style>
  